<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
    <!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">-->
    <title>首页</title>
</head>
<body>
<!-- 头部 -->
<header class="bg-dark sticky-top" th:fragment="index-header">
    <div class="container">
        <!-- 导航 -->
        <nav class="navbar navbar-expand-lg navbar-dark">
            <!-- logo -->
            <a class="navbar-brand" href="#"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <!-- 功能 -->
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item ml-3 btn-group-vertical">
                        <a class="nav-link" th:href="@{/index}">首页</a>
                    </li>
                    <li class="nav-item ml-3 btn-group-vertical" th:if="${session.username==null}">
                        <a class="nav-link" th:href="@{/login}">登录</a>
                    </li>
                    <li class="nav-item ml-3 btn-group-vertical" th:if="${session.username!=null}">
                        <a class="nav-link" th:text="${session.username}"></a>
                    </li>
                    <!-- 退出 -->
                    <li class="nav-item ml-3 btn-group-vertical">
                        <a class="nav-link" th:href="@{/login}">退出</a >
                    </li>
                    <!-- 录入 -->
                    <li class="nav-item ml-3 btn-group-vertical" th:if="${session.isTeacher==1}">
                        <a class="nav-link" th:text="录入"></a >
                    </li>
                </ul>
                <!-- 搜索 -->
                <form class="form-inline my-2 my-lg-0" action="find/search" onsubmit="setValue()">
                    <select id="searchOption" class="custom-select" style="margin-right: 10px" >
                        <option selected>姓名</option>
                        <option value="1" >年级</option>
                        <option value="2" >分数</option>
                    </select>
                    <input id="selectedValue" type="hidden" name="selectedValue" />
                    <input class="form-control mr-sm-2" type="search" aria-label="Search" name="keyword" th:value="${param.keyword}"/>
                    <button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button>
                </form>

            </div>
        </nav>
    </div>
</header>



<!-- 内容 -->
<div class="main">
    <div class="container">

        <!-- 成绩列表 -->
        <ul class="list-unstyled">
            <li class="media pb-3 pt-3 mb-3 border-bottom">
                <div class="media-body">
                    <table class="table">
                        <thead class="thead-light">
                        <tr>
                            <th scope="col">编号</th>
                            <th scope="col">姓名</th>
                            <th scope="col">年级</th>
                            <th scope="col">课程</th>
                            <th scope="col">成绩</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="map:${session.scoreList}">
                            <td th:text="${map.key.sid}">编号</td>
                            <td th:text="${map.value.username}">姓名</td>
                            <td th:text="${map.value.grade}">年级</td>
                            <td th:text="${map.key.coursename}">课程</td>
                            <td th:text="${map.key.score}">成绩</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </li>
        </ul>

    </div>
</div>

<!--结尾-->
<script>
    $(function (){
        var message='[[${message}]]';
        if(message!=''&&message!=null&&message!=undefined){
            alert(message);
        }

    });
</script>
<script>
    function setValue() {
        var selectElement = document.getElementById("searchOption");
        var selectedValue = selectElement.options[selectElement.selectedIndex].value;
        document.getElementById("selectedValue").value = selectedValue;
    }
</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>